import React, { PureComponent } from 'react'
import { connect } from 'dva'
import { Radio } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import classNames from 'classnames'
import styles from './index.less'

@connect(({ loading, propLabel }) => ({
  propLabel,
  loading: loading.models.propLabel,
}))
export default class propLabel extends PureComponent {
  // 组件加载完成后加载数据
  async componentDidMount() {
    const { dispatch } = this.props
    try {
      await dispatch({
        type: 'propLabel/fetchSelected',
      })
    } catch (e) {
      console.log(e)
    }
  }

  renderContent = () => {
    const data = [
      {
        radioTxt: '模板A',
        topDom: (
          <React.Fragment>
            <p>模板元素:二维码+资产编码</p>
            <p>尺寸: 2cm*2cm</p>
          </React.Fragment>
        ),
        value: 'min',
        bottomDom: (
          <React.Fragment>
            <p>500234-01</p>
          </React.Fragment>
        ),
      },
      {
        radioTxt: '模板B',
        topDom: (
          <React.Fragment>
            <p>模板元素:二维码+资产编码</p>
            <p>尺寸: 3cm*3cm</p>
          </React.Fragment>
        ),
        value: 'center',
        bottomDom: (
          <React.Fragment>
            <p>500234-01</p>
            <p>喷漆房</p>
          </React.Fragment>
        ),
      },
      {
        radioTxt: '模板C',
        topDom: (
          <React.Fragment>
            <p>模板元素:二维码+资产编码</p>
            <p>尺寸: 4cm*4cm</p>
          </React.Fragment>
        ),
        value: 'big',
        bottomDom: (
          <React.Fragment>
            <p>500234-01</p>
            <p>喷漆房</p>
          </React.Fragment>
        ),
      },
    ]
    return data.map(item => (
      <div key={item.value} className={styles.perBoard}>
        <div className={styles.perBoard_top}>
          <Radio value={item.value}>{item.radioTxt}</Radio>
          {item.topDom}
        </div>
        <div className={classNames({ perBoard_qrcode: true, [item.value]: true })}></div>
        {/* classNames({ [style.perBoard_qrcode]: true, style[value]: true }) */}
        <div className={styles.perBoard_bottom}>{item.bottomDom}</div>
      </div>
    ))
  }

  onChange = e => {
    try {
      this.props.dispatch({
        type: 'propLabel/setLabel',
        payload: {
          lable: e.target.value,
        },
      })
    } catch (error) {
      console.log(error)
    }
  }

  // 渲染界面
  render() {
    return (
      <PageHeaderWrapper title="资产标签">
        <div className={styles.label_container}>
          <Radio.Group
            className={styles.radio_box}
            onChange={this.onChange}
            value={this.props.propLabel.current}
          >
            {this.renderContent()}
          </Radio.Group>
        </div>
      </PageHeaderWrapper>
    )
  }
}
